@mixin include-loader($number: default) {
  @if ($number== "1") {
    @include loader-1();
  } @else if ($number== "2") {
    @include loader-2();
  } @else if ($number== "3") {
    @include loader-3();
  } @else if ($number== "4") {
    @include loader-4();
  } @else if ($number== "5") {
    @include loader-5();
  } @else if ($number== "6") {
    @include loader-6();
  } @else if ($number== "7") {
    @include loader-7();
  } @else if ($number== "8") {
    @include loader-8();
  } @else if ($number== "9") {
    @include loader-9();
  }
}

$s: 5em;
$masterColor: $primary;
$secondColor: $white;

@mixin default-loader() {
  .loader {
    margin: 50px auto;
    font-size: 12px;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    position: relative;
    text-indent: -9999em;
    -webkit-animation: load5 1.1s infinite ease;
    animation: load5 1.1s infinite ease;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
  }
  @-webkit-keyframes load5 {
    0%,
    100% {
      box-shadow: 0em -2.6em 0em 0em $masterColor,
        1.8em -1.8em 0 0em rgba($masterColor, 0.2),
        2.5em 0em 0 0em rgba($masterColor, 0.2),
        1.75em 1.75em 0 0em rgba($masterColor, 0.2),
        0em 2.5em 0 0em rgba($masterColor, 0.2),
        -1.8em 1.8em 0 0em rgba($masterColor, 0.2),
        -2.6em 0em 0 0em rgba($masterColor, 0.5),
        -1.8em -1.8em 0 0em rgba($masterColor, 0.7);
    }
    12.5% {
      box-shadow: 0em -2.6em 0em 0em rgba($masterColor, 0.7),
        1.8em -1.8em 0 0em $masterColor, 2.5em 0em 0 0em rgba($masterColor, 0.2),
        1.75em 1.75em 0 0em rgba($masterColor, 0.2),
        0em 2.5em 0 0em rgba($masterColor, 0.2),
        -1.8em 1.8em 0 0em rgba($masterColor, 0.2),
        -2.6em 0em 0 0em rgba($masterColor, 0.2),
        -1.8em -1.8em 0 0em rgba($masterColor, 0.5);
    }
    25% {
      box-shadow: 0em -2.6em 0em 0em rgba($masterColor, 0.5),
        1.8em -1.8em 0 0em rgba($masterColor, 0.7), 2.5em 0em 0 0em $masterColor,
        1.75em 1.75em 0 0em rgba($masterColor, 0.2),
        0em 2.5em 0 0em rgba($masterColor, 0.2),
        -1.8em 1.8em 0 0em rgba($masterColor, 0.2),
        -2.6em 0em 0 0em rgba($masterColor, 0.2),
        -1.8em -1.8em 0 0em rgba($masterColor, 0.2);
    }
    37.5% {
      box-shadow: 0em -2.6em 0em 0em rgba($masterColor, 0.2),
        1.8em -1.8em 0 0em rgba($masterColor, 0.5),
        2.5em 0em 0 0em rgba($masterColor, 0.7),
        1.75em 1.75em 0 0em $masterColor,
        0em 2.5em 0 0em rgba($masterColor, 0.2),
        -1.8em 1.8em 0 0em rgba($masterColor, 0.2),
        -2.6em 0em 0 0em rgba($masterColor, 0.2),
        -1.8em -1.8em 0 0em rgba($masterColor, 0.2);
    }
    50% {
      box-shadow: 0em -2.6em 0em 0em rgba($masterColor, 0.2),
        1.8em -1.8em 0 0em rgba($masterColor, 0.2),
        2.5em 0em 0 0em rgba($masterColor, 0.5),
        1.75em 1.75em 0 0em rgba($masterColor, 0.7),
        0em 2.5em 0 0em $masterColor, -1.8em 1.8em 0 0em rgba($masterColor, 0.2),
        -2.6em 0em 0 0em rgba($masterColor, 0.2),
        -1.8em -1.8em 0 0em rgba($masterColor, 0.2);
    }
    62.5% {
      box-shadow: 0em -2.6em 0em 0em rgba($masterColor, 0.2),
        1.8em -1.8em 0 0em rgba($masterColor, 0.2),
        2.5em 0em 0 0em rgba($masterColor, 0.2),
        1.75em 1.75em 0 0em rgba($masterColor, 0.5),
        0em 2.5em 0 0em rgba($masterColor, 0.7), -1.8em 1.8em 0 0em $masterColor,
        -2.6em 0em 0 0em rgba($masterColor, 0.2),
        -1.8em -1.8em 0 0em rgba($masterColor, 0.2);
    }
    75% {
      box-shadow: 0em -2.6em 0em 0em rgba($masterColor, 0.2),
        1.8em -1.8em 0 0em rgba($masterColor, 0.2),
        2.5em 0em 0 0em rgba($masterColor, 0.2),
        1.75em 1.75em 0 0em rgba($masterColor, 0.2),
        0em 2.5em 0 0em rgba($masterColor, 0.5),
        -1.8em 1.8em 0 0em rgba($masterColor, 0.7),
        -2.6em 0em 0 0em $masterColor,
        -1.8em -1.8em 0 0em rgba($masterColor, 0.2);
    }
    87.5% {
      box-shadow: 0em -2.6em 0em 0em rgba($masterColor, 0.2),
        1.8em -1.8em 0 0em rgba($masterColor, 0.2),
        2.5em 0em 0 0em rgba($masterColor, 0.2),
        1.75em 1.75em 0 0em rgba($masterColor, 0.2),
        0em 2.5em 0 0em rgba($masterColor, 0.2),
        -1.8em 1.8em 0 0em rgba($masterColor, 0.5),
        -2.6em 0em 0 0em rgba($masterColor, 0.7),
        -1.8em -1.8em 0 0em $masterColor;
    }
  }
  @keyframes load5 {
    0%,
    100% {
      box-shadow: 0em -2.6em 0em 0em $masterColor,
        1.8em -1.8em 0 0em rgba($masterColor, 0.2),
        2.5em 0em 0 0em rgba($masterColor, 0.2),
        1.75em 1.75em 0 0em rgba($masterColor, 0.2),
        0em 2.5em 0 0em rgba($masterColor, 0.2),
        -1.8em 1.8em 0 0em rgba($masterColor, 0.2),
        -2.6em 0em 0 0em rgba($masterColor, 0.5),
        -1.8em -1.8em 0 0em rgba($masterColor, 0.7);
    }
    12.5% {
      box-shadow: 0em -2.6em 0em 0em rgba($masterColor, 0.7),
        1.8em -1.8em 0 0em $masterColor, 2.5em 0em 0 0em rgba($masterColor, 0.2),
        1.75em 1.75em 0 0em rgba($masterColor, 0.2),
        0em 2.5em 0 0em rgba($masterColor, 0.2),
        -1.8em 1.8em 0 0em rgba($masterColor, 0.2),
        -2.6em 0em 0 0em rgba($masterColor, 0.2),
        -1.8em -1.8em 0 0em rgba($masterColor, 0.5);
    }
    25% {
      box-shadow: 0em -2.6em 0em 0em rgba($masterColor, 0.5),
        1.8em -1.8em 0 0em rgba($masterColor, 0.7), 2.5em 0em 0 0em $masterColor,
        1.75em 1.75em 0 0em rgba($masterColor, 0.2),
        0em 2.5em 0 0em rgba($masterColor, 0.2),
        -1.8em 1.8em 0 0em rgba($masterColor, 0.2),
        -2.6em 0em 0 0em rgba($masterColor, 0.2),
        -1.8em -1.8em 0 0em rgba($masterColor, 0.2);
    }
    37.5% {
      box-shadow: 0em -2.6em 0em 0em rgba($masterColor, 0.2),
        1.8em -1.8em 0 0em rgba($masterColor, 0.5),
        2.5em 0em 0 0em rgba($masterColor, 0.7),
        1.75em 1.75em 0 0em $masterColor,
        0em 2.5em 0 0em rgba($masterColor, 0.2),
        -1.8em 1.8em 0 0em rgba($masterColor, 0.2),
        -2.6em 0em 0 0em rgba($masterColor, 0.2),
        -1.8em -1.8em 0 0em rgba($masterColor, 0.2);
    }
    50% {
      box-shadow: 0em -2.6em 0em 0em rgba($masterColor, 0.2),
        1.8em -1.8em 0 0em rgba($masterColor, 0.2),
        2.5em 0em 0 0em rgba($masterColor, 0.5),
        1.75em 1.75em 0 0em rgba($masterColor, 0.7),
        0em 2.5em 0 0em $masterColor, -1.8em 1.8em 0 0em rgba($masterColor, 0.2),
        -2.6em 0em 0 0em rgba($masterColor, 0.2),
        -1.8em -1.8em 0 0em rgba($masterColor, 0.2);
    }
    62.5% {
      box-shadow: 0em -2.6em 0em 0em rgba($masterColor, 0.2),
        1.8em -1.8em 0 0em rgba($masterColor, 0.2),
        2.5em 0em 0 0em rgba($masterColor, 0.2),
        1.75em 1.75em 0 0em rgba($masterColor, 0.5),
        0em 2.5em 0 0em rgba($masterColor, 0.7), -1.8em 1.8em 0 0em $masterColor,
        -2.6em 0em 0 0em rgba($masterColor, 0.2),
        -1.8em -1.8em 0 0em rgba($masterColor, 0.2);
    }
    75% {
      box-shadow: 0em -2.6em 0em 0em rgba($masterColor, 0.2),
        1.8em -1.8em 0 0em rgba($masterColor, 0.2),
        2.5em 0em 0 0em rgba($masterColor, 0.2),
        1.75em 1.75em 0 0em rgba($masterColor, 0.2),
        0em 2.5em 0 0em rgba($masterColor, 0.5),
        -1.8em 1.8em 0 0em rgba($masterColor, 0.7),
        -2.6em 0em 0 0em $masterColor,
        -1.8em -1.8em 0 0em rgba($masterColor, 0.2);
    }
    87.5% {
      box-shadow: 0em -2.6em 0em 0em rgba($masterColor, 0.2),
        1.8em -1.8em 0 0em rgba($masterColor, 0.2),
        2.5em 0em 0 0em rgba($masterColor, 0.2),
        1.75em 1.75em 0 0em rgba($masterColor, 0.2),
        0em 2.5em 0 0em rgba($masterColor, 0.2),
        -1.8em 1.8em 0 0em rgba($masterColor, 0.5),
        -2.6em 0em 0 0em rgba($masterColor, 0.7),
        -1.8em -1.8em 0 0em $masterColor;
    }
  }
}

@mixin loader-1() {
  .loader,
  .loader:before,
  .loader:after {
    background: $masterColor;
    -webkit-animation: load1 1s infinite ease-in-out;
    animation: load1 1s infinite ease-in-out;
    width: 1em;
    height: 4em;
  }
  .loader {
    color: $masterColor;
    text-indent: -9999em;
    margin: 50px auto;
    position: relative;
    font-size: 11px;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
  }
  .loader:before,
  .loader:after {
    position: absolute;
    top: 0;
    content: "";
  }
  .loader:before {
    left: -1.5em;
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
  }
  .loader:after {
    left: 1.5em;
  }
  @-webkit-keyframes load1 {
    0%,
    80%,
    100% {
      box-shadow: 0 0;
      height: 4em;
    }
    40% {
      box-shadow: 0 -2em;
      height: 5em;
    }
  }
  @keyframes load1 {
    0%,
    80%,
    100% {
      box-shadow: 0 0;
      height: 4em;
    }
    40% {
      box-shadow: 0 -2em;
      height: 5em;
    }
  }
}

@mixin loader-2() {
  .loader,
  .loader:before,
  .loader:after {
    border-radius: 50%;
  }

  .loader {
    color: $masterColor;
    font-size: 11px;
    text-indent: -99999em;
    margin: 55px auto;
    position: relative;
    width: $s;
    height: $s;
    box-shadow: inset 0 0 0 1em;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
  }
  .loader:before,
  .loader:after {
    position: absolute;
    content: "";
  }
  .loader:before {
    width: $s/2 + 0.2;
    height: $s + 0.2;
    background: rgba($secondColor, 0.8);
    border-radius: $s/2 + 0.2 0 0 $s + 0.2;
    top: -0.1em;
    left: -0.1em;
    -webkit-transform-origin: $s/2 + 0.2 $s/2 + 0.1;
    transform-origin: $s/2 + 0.2 $s/2 + 0.1;
    -webkit-animation: load2 2s infinite ease 1.5s;
    animation: load2 2s infinite ease 1.5s;
  }
  .loader:after {
    width: $s/2 + 0.2;
    height: $s + 0.2;
    background: rgba($secondColor, 0.8);
    border-radius: 0 $s + 0.2 $s + 0.2 0;
    top: -0.1em;
    left: $s/2 + 0.1;
    -webkit-transform-origin: 0px $s/2 + 0.1;
    transform-origin: 0px $s/2 + 0.1;
    -webkit-animation: load2 2s infinite ease;
    animation: load2 2s infinite ease;
  }
  @-webkit-keyframes load2 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  @keyframes load2 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
}

@mixin loader-3() {
  .loader {
    font-size: 10px;
    margin: 50px auto;
    text-indent: -9999em;
    width: $s;
    height: $s;
    border-radius: 50%;
    background: $masterColor;
    background: -moz-linear-gradient(
      left,
      $masterColor 10%,
      rgba($masterColor, 0) 42%
    );
    background: -webkit-linear-gradient(
      left,
      $masterColor 10%,
      rgba($masterColor, 0) 42%
    );
    background: -o-linear-gradient(
      left,
      $masterColor 10%,
      rgba($masterColor, 0) 42%
    );
    background: -ms-linear-gradient(
      left,
      $masterColor 10%,
      rgba($masterColor, 0) 42%
    );
    background: linear-gradient(
      to right,
      $masterColor 10%,
      rgba($masterColor, 0) 42%
    );
    position: relative;
    -webkit-animation: load3 1.4s infinite linear;
    animation: load3 1.4s infinite linear;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
  }
  .loader:before {
    width: 50%;
    height: 50%;
    background: $masterColor;
    border-radius: 100% 0 0 0;
    position: absolute;
    top: 0;
    left: 0;
    content: "";
  }
  .loader:after {
    background: $secondColor;
    width: 75%;
    height: 75%;
    border-radius: 50%;
    content: "";
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
  @-webkit-keyframes load3 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  @keyframes load3 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
}

@mixin loader-4() {
  .loader {
    color: $masterColor;
    font-size: 11px;
    margin: 50px auto;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    position: relative;
    text-indent: -9999em;
    -webkit-animation: load4 1.3s infinite linear;
    animation: load4 1.3s infinite linear;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
  }
  @-webkit-keyframes load4 {
    0%,
    100% {
      box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em,
        0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
    }
    12.5% {
      box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em,
        0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
    }
    25% {
      box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0,
        0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
    }
    37.5% {
      box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em,
        0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
    }
    50% {
      box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em,
        0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
    }
    62.5% {
      box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em,
        0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
    }
    75% {
      box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em,
        2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em,
        -2em -2em 0 0;
    }
    87.5% {
      box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em,
        0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
    }
  }
  @keyframes load4 {
    0%,
    100% {
      box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em,
        0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
    }
    12.5% {
      box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em,
        0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
    }
    25% {
      box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0,
        0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
    }
    37.5% {
      box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em,
        0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
    }
    50% {
      box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em,
        0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
    }
    62.5% {
      box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em,
        0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
    }
    75% {
      box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em,
        2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em,
        -2em -2em 0 0;
    }
    87.5% {
      box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em,
        0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
    }
  }
}

@mixin loader-5() {
  .loader {
    color: $masterColor;
    font-size: 110px;
    text-indent: -9999em;
    overflow: hidden;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    margin: 72px auto;
    position: relative;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load6 1.7s infinite ease, round 1.7s infinite ease;
    animation: load6 1.7s infinite ease, round 1.7s infinite ease;
  }
  @-webkit-keyframes load6 {
    0% {
      box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
        0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
    5%,
    95% {
      box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
        0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
    10%,
    59% {
      box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em,
        -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em,
        -0.297em -0.775em 0 -0.477em;
    }
    20% {
      box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em,
        -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em,
        -0.749em -0.34em 0 -0.477em;
    }
    38% {
      box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em,
        -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em,
        -0.82em -0.09em 0 -0.477em;
    }
    100% {
      box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
        0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
  }
  @keyframes load6 {
    0% {
      box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
        0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
    5%,
    95% {
      box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
        0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
    10%,
    59% {
      box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em,
        -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em,
        -0.297em -0.775em 0 -0.477em;
    }
    20% {
      box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em,
        -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em,
        -0.749em -0.34em 0 -0.477em;
    }
    38% {
      box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em,
        -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em,
        -0.82em -0.09em 0 -0.477em;
    }
    100% {
      box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
        0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
  }
  @-webkit-keyframes round {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  @keyframes round {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
}

@mixin loader-6() {
  .loader,
  .loader:before,
  .loader:after {
    border-radius: 50%;
    width: 1.5em;
    height: 1.5em;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation: load7 1.8s infinite ease-in-out;
    animation: load7 1.8s infinite ease-in-out;
  }
  .loader {
    color: $masterColor;
    font-size: 10px;
    margin: 50px auto;
    position: relative;
    text-indent: -9999em;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
  }
  .loader:before,
  .loader:after {
    content: "";
    position: absolute;
    top: 0;
  }
  .loader:before {
    left: -3.5em;
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
  }
  .loader:after {
    left: 3.5em;
  }
  @-webkit-keyframes load7 {
    0%,
    80%,
    100% {
      box-shadow: 0 2.5em 0 -1.3em;
    }
    40% {
      box-shadow: 0 2.5em 0 0;
    }
  }
  @keyframes load7 {
    0%,
    80%,
    100% {
      box-shadow: 0 2.5em 0 -1.3em;
    }
    40% {
      box-shadow: 0 2.5em 0 0;
    }
  }
}

@mixin loader-7() {
  .loader,
  .loader:after {
    border-radius: 50%;
    width: $s;
    height: $s;
  }
  .loader {
    margin: 50px auto;
    font-size: 10px;
    position: relative;
    text-indent: -9999em;
    border-top: 1.1em solid rgba($masterColor, 0.2);
    border-right: 1.1em solid rgba($masterColor, 0.2);
    border-bottom: 1.1em solid rgba($masterColor, 0.2);
    border-left: 1.1em solid $masterColor;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load8 1.1s infinite linear;
    animation: load8 1.1s infinite linear;
  }
  @-webkit-keyframes load8 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  @keyframes load8 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
}

@mixin loader-8() {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  .loader {
    display: inline-block;
    position: relative;
    width: 64px;
    height: 64px;
  }
  .loader:before,
  .loader:after {
    content: "";
    position: absolute;
    border: 4px solid $masterColor;
    opacity: 1;
    border-radius: 50%;
    animation: loader28 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
  }
  .loader:after {
    animation-delay: -0.5s;
  }
  @keyframes loader28 {
    0% {
      top: 28px;
      left: 28px;
      width: 0;
      height: 0;
      opacity: 1;
    }
    100% {
      top: -1px;
      left: -1px;
      width: 58px;
      height: 58px;
      opacity: 0;
    }
  }
}

@mixin loader-9 {
  display: inline-block;
  position: absolute;
  left: 50%;
  top: 50%;

  width: 64px;
  height: 64px;
  transform: translate(-50%, -50%) rotate(45deg);
  transform-origin: 32px 32px;

  .loader {
    top: 23px;
    left: 19px;
    position: absolute;
    width: 26px;
    height: 26px;
    background: $masterColor;
    animation: loader9 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  .loader:after,
  .loader:before {
    content: " ";
    position: absolute;
    display: block;
    width: 26px;
    height: 26px;
    background: $masterColor;
  }
  .loader:before {
    left: -17px;
    border-radius: 50% 0 0 50%;
  }
  .loader:after {
    top: -17px;
    border-radius: 50% 50% 0 0;
  }
  @keyframes loader9 {
    0% {
      transform: scale(0.95);
    }
    5% {
      transform: scale(1.1);
    }
    39% {
      transform: scale(0.85);
    }
    45% {
      transform: scale(1);
    }
    60% {
      transform: scale(0.95);
    }
    100% {
      transform: scale(0.9);
    }
  }
}
